// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
@use '../includes/lib' as *;

// * -------------------------------------------------------------------------- */
// Content Block

.vpn-content-block {
    align-items: center;
    flex-direction: column;
    display: flex;
    -moz-outline-radius: $border-radius-sm;
    border-radius: $border-radius-sm;
    color: $color-black;
    margin-bottom: $layout-lg;
    outline: 4px solid $color-black;
    overflow: visible;
    padding: 0;
    position: relative;
    z-index: 0;

    &::after {
        background: $color-marketing-gray-20;
        border-radius: $border-radius-sm;
        content: '';
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -1;
    }

    .vpn-content-block-container {
        @include border-box;
        margin: 0 auto;
        padding: $spacing-md;
        width: 100%;
    }

    .vpn-content-block-heading {
        @include text-title-md;
        margin-bottom: $spacing-xl;
    }

    &.t-highlight {
        color: $color-black;
        outline: 4px solid $color-vpn-brand-purple;

        &::after {
            background: #c4c6fc;
        }

        .vpn-content-block-container {
            background-color: $color-white;
        }
    }

    .l-columns-two {
        .l-column-first {
            margin-bottom: $spacing-xl;
        }
    }

    &.t-center {
        .vpn-content-block-container {
            text-align: center;
        }

        .vpn-content-well-title {
            @include text-title-md;
        }

        .guarantee-copy {
            margin-bottom: $spacing-md;
        }
    }

    @media #{$mq-sm} {
        .vpn-content-block-container {
            padding: $spacing-lg;
        }
    }

    @media #{$mq-md} {
        margin-bottom: $layout-xl;

        &::after {
            left: $spacing-xl;
            top: $spacing-xl;
        }

        .vpn-content-block-container {
            padding: ($spacing-2xl * 2) $spacing-2xl;
        }

        .l-columns-two {
            @include clearfix;
            position: relative;

            .l-column-first {
                @include bidi(((float, left, right),));
                width: calc(50% - #{$spacing-xl * 2});
                margin-bottom: 0;
            }

            .l-column-last {
                @include bidi(((float, right, left),));
                width: calc(50% - #{$spacing-xl * 2});
            }
        }
    }
}

// * -------------------------------------------------------------------------- */
// Content Block with Image

.vpn-content-media {
    margin: 0 auto $spacing-xl;
    overflow: hidden;
    position: relative;
    text-align: center;
    z-index: 0;

    .vpn-content-media-image {
        img {
            height: auto;
            max-width: 480px;
            width: 100%;
        }
    }

    .vpn-content-media-copy {
        @include bidi(((text-align, left, right),));
        padding: $spacing-lg $spacing-md;
        padding-top: 0;
    }

    .vpn-content-media-heading {
        @include text-title-md;
        margin-bottom: $spacing-xl;
    }

    .vpn-content-media-desc {
        @include text-body-lg;
        color: $color-marketing-gray-90;
    }

    .vpn-content-media-image-container {
        padding: $spacing-lg $spacing-md;
        padding-bottom: 0;
    }

    &.has-outline {
        -moz-outline-radius: $border-radius-sm;
        border-radius: $border-radius-sm;
        outline: 4px solid $color-black;

        &::after {
            background: $color-marketing-gray-20;
            border-radius: $border-radius-sm;
            content: '';
            display: block;
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: -1;
        }
    }

    @media #{$mq-sm} {
        .vpn-content-media-copy,
        .vpn-content-media-image-container {
            padding: $spacing-lg $spacing-lg;
        }
    }

    @media #{$mq-md} {
        clear: both;
        margin-bottom: $layout-lg;

        .vpn-content-media-copy,
        .vpn-content-media-image-container {
            margin-top: 0;
            padding: ($spacing-xl * 2) $spacing-2xl;
            width: calc(50% - (#{$spacing-2xl} * 2));
        }

        .vpn-content-media-heading {
            margin-bottom: $spacing-xl;
        }

        &.has-outline {
            &::after {
                left: $spacing-xl;
                top: $spacing-xl;
            }
        }

        &.vpn-content-media-left-half {
            .vpn-content-media-copy {
                @include bidi(((float, left, right),));
            }

            .vpn-content-media-image-container {
                @include bidi(((float, right, left),));
            }
        }

        &.vpn-content-media-right-half {
            .vpn-content-media-copy {
                @include bidi(((float, right, left),));
            }

            .vpn-content-media-image-container {
                @include bidi(((float, left, right),));
            }
        }
    }

    @media #{$mq-lg} {
        .vpn-content-media-desc {
            @include text-body-xl;
        }
    }

    @supports (display: grid) {
        overflow: visible;

        @media #{$mq-md} {
            @include grid-column-gap($spacing-xl);
            display: grid;

            .vpn-content-media-copy {
                align-items: center;
                display: flex;
            }

            &.vpn-content-media-left-half {
                grid-template-columns: 1fr 1fr;

                .vpn-content-media-copy {
                    grid-column: 1;
                    grid-row: 1;
                    width: auto;
                }

                .vpn-content-media-image-container {
                    grid-column: 2;
                    grid-row: 1;
                    width: auto;
                }
            }

            &.vpn-content-media-right-half {
                grid-template-columns: 1fr 1fr;

                .vpn-content-media-copy {
                    grid-column: 2;
                    grid-row: 1;
                    width: auto;
                }

                .vpn-content-media-image-container {
                    grid-column: 1;
                    grid-row: 1;
                    width: auto;
                }
            }
        }

        @media #{$mq-lg} {
            @include grid-column-gap($spacing-2xl);
        }
    }
}
